<template>
    <div>
      <div class="imgs">
      
      <el-upload
      :action="url"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleAvatarSuccess">
   <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src= "store.store_license_images" alt="">
    </el-dialog>
    </div>


    <!--  -->
    <el-form :model="store" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <div class="nameput">
    门店名称： 
  <el-input
    placeholder="请输入门店名称"
    prefix-icon="el-icon-search"
    style="width:180px"
    v-model="store.store_name">
  </el-input>
</div>
    <!--  -->
    <div class="licenseput">
    营业执照：
  <el-input
    placeholder="请输入营业执照号码"
    prefix-icon="el-icon-search"
    style="width:180px"
    v-model="store.store_license_number">
  </el-input>
    </div>
    <!--  -->
    <div class="addressput">
    营业地址：
  <el-input
    placeholder="请输入营业地址"
    prefix-icon="el-icon-search"
    style="width:500px"
    v-model="store.store_address">
  </el-input>
</div>
    <!--  -->
    <div class="locationput">
     定  位 ：
  <el-input
    placeholder="请输入定位"
    prefix-icon="el-icon-search"
    style="width:500px"
    v-model="store.store_location">
  </el-input>
</div>
    <!--  -->
    <div class="masterput">
     法  人 ：
  <el-input
    placeholder="请输入法人"
    prefix-icon="el-icon-search"
    style="width:500px"
    v-model="store.store_master">
  </el-input>
</div>
    <!--  -->
    <div class="telput">
    联系电话：
  <el-input
    placeholder="请输入联系电话"
    prefix-icon="el-icon-search"
    style="width:500px"
    v-model="store.store_tel">
  </el-input>
</div>
    <!--  -->
    <div class="specialput">
    特 色：
  <el-input
    placeholder="请输入特色"
    prefix-icon="el-icon-search"
    style="width:500px"
    v-model="store.store_special">
  </el-input>
</div>
    <!--  -->
    <div class="commissionput">
    佣金比例：
  <el-input
    placeholder="请输入佣金比例"
    prefix-icon="el-icon-search"
    style="width:500px"
    v-model="store.store_commission">
  </el-input>
</div>
    <!--  -->
    <div class="vipput">
    Vip等级：
  <el-input
    placeholder="该用户是否是vip?"
    prefix-icon="el-icon-search"
    style="width:500px"
    v-model="store.store_vip">
  </el-input>
</div>
</el-form>
    <!--  -->
    <div class="add">
        <el-button type="primary" round @click="Add">申请</el-button>
    </div>
</div>
</template>>

<script>
import { AddStore } from '@/services/StoreInfo'
export default {
  data() {
    return {
      store:{
      store_name: '',
      store_license_number: '',
      store_address: '',
      store_location: '',
      store_master: '',
      store_tel: '',
      store_special: '',
      store_commission: '',
      store_vip: '',
      store_license_images: '',

      // 图片的data
      
      },url:'/api/pet_sys/upload.do',
      dialogImageUrl: '',
      dialogVisible: false
    } 
  },
  methods:{
     async Add(){
      //   var resp =await AddStore(this.store);
      // },
      this.$confirm("是否申请门店？",{
          confirmButton: '确定',
          confirmButton: '取消',
        }).then(async (resp)=>{
          if(resp){
           await AddStore(this.store).then((res)=>{
              location.reload();
            })
          }
        }).catch(err => err)
     },
    //  
     handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
    // 
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        console.log(file.url);
        this.store.store_license_images = file.url;
        this.dialogVisible = true;
        // console.log(store.store_license_images)
      },

    }
}
</script>
<style scoped>
    .nameput{
        margin:100px 320px 5px 0px
    }
    .licenseput{
        margin:0px 320px 5px 0px
    }
    .addressput{
        margin:0px 0px 5px 0px
    }
    .locationput{
        margin:0px -20px 5px 0px
    }
    .masterput{
        margin:0px -20px 5px 0px
    }
    .telput{
         margin:0px 0px 5px 0px
    }
    .specialput{
        margin:0px -30px 5px 0px
    }
    .commissionput{
         margin:0px 0px 5px 0px
    }
    .vipput{
        margin:0px -10px 5px 0px
    }
    .add{
        margin:20px 0px 0px 0px
    }
    .imgs{
        margin:0px 265px -100px 0px
    }
</style>>